<template>
  <div>

    <div style="margin-top: 30px; text-align: center;">
      <el-checkbox-group v-model="rolePermissionIds">
        <el-checkbox v-for="(permission, index) in permissionList" :key="index" :label="permission.id" border>
          {{ permission.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <br>

    <el-card v-loading="villageLoading">
      <div slot="header" style="text-align: center;">
        <label>配置村庄</label>
      </div>

      <div v-for="(item, index) in institutionList" :key="index" >
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-checkbox v-model="item.checkedInstitution" @change="checkedVillageAllChange(item)"><h3>{{ item.name }}</h3></el-checkbox>
            <el-checkbox-group v-model="item.checkedVillageIds" style="margin-left: 20px;" @change="checkedVillageChange(item)">
              <el-checkbox v-for="(village, index) in item.villageDTOList" :key="index" :label="village.id" style="width: 300px; border:1px solid #409EFF; padding: 8px; margin: 5px 5px;">
                <span>{{ village.name }}</span>
                <el-radio-group v-model="village.scope" :disabled="disabledScope(item, village)" style="margin-left: 5px;">
                  <el-radio :label="1">所有数据</el-radio>
                  <el-radio :label="2">提交数据</el-radio>
                </el-radio-group>
              </el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <div style="margin-top: 20px; height: 60px; line-height: 60px; text-align: center;">
      <el-button :loading="buttonLoading" type="primary" @click="assignPermission">确认</el-button>
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  props: ['roleId'],
  data() {
    return {
      buttonLoading: false,
      villageLoading: false,
      permissionList: [],
      rolePermissionIds: [],
      institutionList: []
    }
  },
  created() {
    this.getPermissionList();
    this.getPermissionListByRoleId();
    this.getInstitutionVillageListByRoleId();
  },
  methods: {
    // 权限列表
    getPermissionList() {
      request({
        url: '/api/permission/getPermissionList',
        method: 'get',
        params: {}
      }).then((res) => {
        this.permissionList = res.result;
      }).catch(() => {

      })
    },
    // 角色权限
    getPermissionListByRoleId() {
      request({
        url: '/api/permission/getPermissionListByRoleId',
        method: 'get',
        params: { roleId: this.roleId }
      }).then((res) => {
        res.result.forEach(item => {
          this.rolePermissionIds.push(item.id);
        })
      }).catch(() => {

      })
    },
    // 获取管理区村庄列表
    getInstitutionVillageListByRoleId() {
      this.villageLoading = true;
      request({
        url: '/api/roleVillage/getInstitutionVillageListByRoleId',
        method: 'get',
        params: { roleId: this.roleId }
      }).then((res) => {
        this.institutionList = res.result;
        this.villageLoading = false;
      }).catch(() => {
        this.villageLoading = false;
      })
    },
    // 分配权限
    assignPermission() {
      // if (this.rolePermissionIds.length === 0) {
      //   this.$message({
      //     message: '请选择权限',
      //     type: 'warning'
      //   })
      //   return;
      // }

      var checkedVillage = [];
      this.institutionList.forEach((item) => {
        item.checkedVillageIds.forEach((checkedVillageId) => {
          item.villageDTOList.forEach((village) => {
            if (checkedVillageId === village.id) {
              checkedVillage.push({ villageId: village.id, scope: village.scope });
            }
          })
        })
      })

      if (checkedVillage.length === 0) {
        this.$message({
          message: '请选择村庄',
          type: 'warning'
        })
        return;
      }

      this.buttonLoading = true;
      request({
        url: '/api/role/assignPermission',
        method: 'post',
        data: { id: this.roleId, permissionIds: this.rolePermissionIds, roleVillageDTOList: checkedVillage }
      }).then((res) => {
        this.buttonLoading = false;
        this.$message(res.resultCodeDesc);
        this.$emit('closeDialog', false);
      }).catch(() => {
        this.buttonLoading = false;
      })
    },
    onCancel() {
      this.$emit('closeDialog', false);
    },
    checkedVillageAllChange(item) {
      if (item.checkedInstitution === true) {
        item.checkedVillageIds = [];
        item.villageDTOList.forEach((village) => {
          item.checkedVillageIds.push(village.id);
        })
      } else {
        item.checkedVillageIds = [];
      }
    },
    checkedVillageChange(item) {
      if (item.checkedVillageIds.length !== 0) {
        item.checkedInstitution = true;
      } else {
        item.checkedInstitution = false;
      }
    },
    // 可用/禁用数据范围
    disabledScope(institution, village) {
      var checkedVillageIds = institution.checkedVillageIds;
      for (var i = 0; i < checkedVillageIds.length; i++) {
        if (checkedVillageIds[i] === village.id) {
          return false;
        }
      }
      return true;
    }
  }
}
</script>

<style>
</style>
